import React, { useState } from "react";
import { Pagination } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

const basicPagination = () => {
  const onChange = (page) => {
    console.log(page);
  };
  return <Pagination total={33} pageSize={10} onChange={onChange} />;
};

const miniPagination = () => {
  return <Pagination mini={true} total={33} />;
};

const ControlledPagination = () => {
  const [currentPage, setCurrentPage] = useState(2);

  const onChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <Pagination
      total={33}
      pageSize={10}
      current={currentPage}
      onChange={onChange}
    />
  );
};

const PaginationWithJumper = () => {
  return <Pagination total={88} pageSize={10} />;
};

const data = {
  title: "Pagination 分页组件",
  descriptions: ["将长列表数据拆分进行分页展示"],
  content: {
    title: "代码演示",
    children: [
      {
        title: "基础分页",
        descriptions: "",
        component: basicPagination(),
        codeSnippet: `import {Pagination} from '@ct0/ui'

const onChange = (page) => {
    console.log(page);
  };

ReactDOM.render(
    <Pagination
      showTotal={(total, num) => '共 $/{total} 条'}
      total={33}
      pageSize={10}
      onChange={onChange}
    />, 
    mountNode
)
`,
      },

      {
        title: "迷你分页",
        descriptions: "",
        component: miniPagination(),
        codeSnippet: `import {Pagination} from '@ct0/ui'

ReactDOM.render(<Pagination simple={true} total={33}/>, mountNode)
`,
      },
      {
        title: "受控",
        descriptions: "",
        component: <ControlledPagination />,
        codeSnippet: `import {Pagination} from '@ct0/ui'
        
function App() {
    const [currentPage, setCurrentPage] = useState(2);

    const onChange = (page) => {
      setCurrentPage(page);
    };
  
    return (
      <Pagination
        total={33}
        pageSize={10}
        current={currentPage}
        onChange={onChange}
      />
    );
}

ReactDOM.render(<App />, mountNode)`,
      },
      {
        title: "页数快速跳转",
        descriptions: "页数大于7页时，自动开启快速跳转",
        component: <PaginationWithJumper />,
        codeSnippet: `import {Pagination} from '@ct0/ui'
        
function App() {
  
    return (
      <Pagination total={88} pageSize={10} />
    );
}

ReactDOM.render(<App />, mountNode)`,
      },
    ],
  },

  apiInfo: ["分页组件参数"],
  componentApi: [
    {
      param: "total",
      description: "展示数据的总数",
      type: "number",
      default: "",
      required: true,
    },
    {
      param: "pageSize",
      description: "每页展示的数据数量",
      type: "number",
      default: "10",
      required: false,
    },
    {
      param: "defaultPageSize",
      description: "每页展示的数据数量的默认值",
      type: "number",
      default: "10",
      required: false,
    },
    {
      param: "current",
      description: "当前页数的受控参数",
      type: "number",
      default: "1",
      required: false,
    },
    {
      param: "defaultCurrent",
      description: "当前页数的受控参数的默认值",
      type: "number",
      default: "1",
      required: false,
    },
    {
      param: "onChange",
      description: "页数和展示数量改变时的回掉事件",
      type: "(page: number, pageSize: number) => void",
      default: "",
      required: false,
    },
    {
      param: "mini",
      description: "是否开启迷你分页器",
      type: "boolean",
      default: "false",
      required: false,
    },
  ],
};

export default function () {
  return <PanelTemplate {...data} />;
}
